<template>
  <div>
    <h1 class="px-4 pt-5 text-base font-medium text-black" v-if="title">{{ title }}</h1>
    <div class="cms-recommend" :class="`style_${type}`">
      <template v-if="[1, 3].includes(Number(type))">
        <div class="recommend" v-for="(item, index) in 4" :key="index">
          <div class="img-container">
            <div class="article_shadow">
              <img :src="homeIcons.atlas" class="img-show" />
            </div>
            <template v-if="[1, 4].includes(Number(type))">
              <div class="gold" v-if="index % 2 === 0">
                <pay-circle-outlined class="gold-icon text-white" />
                <span class="gold-num">50</span>
              </div>

              <div class="free" v-else>
                <span class="free-text">免费</span>
              </div>
            </template>
          </div>
          <div class="text-container">
            <p class="title">图集名称</p>
            <p v-if="type === 1" class="category">类型</p>
            <p v-if="type === 3" class="category">图集标签</p>
          </div>
        </div>
      </template>
      <template v-if="type === 2">
        <div class="w-full flex flex-row gap-x-1 px-1 py-[5px] bg-[#f6f8fb] rounded-2">
          <div class="between">
            <div class="img-container video_shadow">
              <img :src="homeIcons.atlas" class="img-show" />
              <div class="title dome-text">断片</div>
              <div class="category dome-text">言情</div>
            </div>
            <div class="img-container video_shadow">
              <img :src="homeIcons.atlas" class="img-show" />
              <div class="title dome-text">逆龄千岁</div>
              <div class="category dome-text">言情</div>
            </div>
          </div>
          <div class="mid">
            <div class="img-container video_shadow">
              <img :src="homeIcons.atlas" class="img-show" />
              <div class="title">咒术回战</div>
              <div class="category dome-text">热血</div>
            </div>
          </div>
          <div class="right-container between">
            <div class="img-container video_shadow">
              <img :src="homeIcons.atlas" class="img-show" />
              <div class="title">逆龄千岁</div>
              <div class="category dome-text">言情</div>
            </div>
            <div class="img-container video_shadow">
              <img :src="homeIcons.atlas" class="img-show" />
              <div class="title">逆龄千岁</div>
              <div class="category dome-text">言情</div>
            </div>
          </div>
        </div>
      </template>
      <template v-if="type === 4">
        <div class="bg-[#f6f8fb] rounded-lg p-2">
          <div class="recommend-banner">
            <div class="article_shadow">
              <img :src="homeIcons.atlas" class="img-show" />
            </div>
            <p class="title">断片</p>
            <p class="category">热心少年齐聚一堂，冒险画风，兄妹齐心协力战鬼怪！</p>
            <div class="gold" v-if="true">
              <pay-circle-outlined class="gold-icon" />
              <span class="gold-num">50</span>
            </div>
            <div class="free" v-if="false">
              <span class="free-text">免费</span>
            </div>
          </div>
          <div class="flex flex-row gap-x-1">
            <div class="recommend" v-for="(item, index) in 3" :key="index">
              <div class="article_shadow">
                <img :src="homeIcons.atlas" class="img-show" />
              </div>
              <p class="title">断片</p>
              <div class="gold" v-if="true">
                <pay-circle-outlined class="gold-icon" />
                <span class="gold-num">50</span>
              </div>

              <div class="free" v-if="false">
                <span class="free-text">免费</span>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import cmsRecommendGridProps from './porps'
import { PayCircleOutlined } from '@ant-design/icons-vue'
import homeIcons from '../../assets'

export default defineComponent({
  props: cmsRecommendGridProps,
  data() {
    return {
      homeIcons
    }
  },
  components: {
    PayCircleOutlined
  }
})
</script>
<style scoped lang="less">
.cms-recommend {
  width: 375px;
  padding: 8px 16px;
  background-color: #f6f6f6;
  @apply flex flex-wrap gap-x-3 gap-y-4;

  .article_shadow {
    width: 100%;
    height: 100%;
  }
  &.style_1 {
    .recommend {
      width: 165px;
      text-align: left;

      .img-container {
        width: 100%;
        height: 220px;
        border-radius: 8px;
        position: relative;
        overflow: hidden;
      }
      .img-show {
        width: 70px;
        object-fit: cover;
      }

      .gold {
        width: 43px;
        height: 20px;
        // transform: scaleX(-1);
        background-image: linear-gradient(135deg, #eed78e 0%, #cbae6c 100%);
        border-radius: 0 8px 0 8px;
        position: absolute;
        top: 0;
        right: 0;
        .gold-icon {
          position: absolute;
          top: 3px;
          left: 6px;
        }
        .gold-num {
          font-size: 12px;
          color: #ffffff;
          line-height: 12px;
          font-weight: 400;
          position: absolute;
          top: 4px;
          right: 6px;
        }
      }
      .free {
        position: absolute;
        top: 0;
        right: 0;
        width: 43px;
        height: 20px;
        text-align: center;
        font-size: 12px;
        color: #ffffff;
        background-image: linear-gradient(135deg, #ffa45d 0%, #ff613f 100%);
        border-radius: 0 8px 0 8px;
      }
      .text-container {
        @apply flex flex-col;
      }
      .title {
        font-size: 14px;
        color: #484a4d;
        margin-top: 8px;
        line-height: 14px;
      }
      .category {
        font-size: 12px;
        line-height: 12px;
        color: #b4b8bf;
        margin-top: 8px;
      }
    }
  }
  &.style_2 {
    .between {
      width: 109px;
      height: 418px;
      border-radius: 8px 0 0 8px;

      @apply flex flex-col gap-y-1 text-center overflow-hidden;
    }
    .right-container {
      border-radius: 0 8px 8px 0;
    }
    .img-container {
      width: 100%;
      height: 100%;
      position: relative;
    }
    .img-show {
      width: 70px;
    }
    .title {
      width: 100%;
      font-size: 14px;
      text-align: center;
      word-break: break-all;
      color: #ffffff;
      letter-spacing: 0;
      font-weight: 500;
      position: absolute;
      bottom: 30px;
    }
    .category {
      width: 30px;
      height: 16px;
      text-align: center;

      background: #ffffff;
      color: #333333;
      font-size: 7px;
      line-height: 16px;
      border-radius: 7px;
      position: absolute;
      left: 40px;
      bottom: 8px;
    }
    .mid {
      width: 109px;
      height: 418px;
    }
  }

  &.style_3 {
    @apply gap-x-2;
    .recommend {
      width: 167px;
      height: 219px;
      border: 1px solid #f1f1f1;
      border-radius: 4px;
      @apply flex flex-col overflow-hidden;
    }
    .img-container {
      width: 100%;
      height: 169px;
    }
    .img-show {
      width: 51px;
    }
    .title {
      font-size: 14px;
      color: #484a4d;
      margin-top: 8px;
      line-height: 14px;
      margin-left: 8px;
    }
    .category {
      font-size: 12px;
      line-height: 12px;
      color: #b4b8bf;
      margin-top: 8px;
      margin-left: 8px;
      @apply truncate;
    }
  }
  &.style_4 {
    .recommend-banner {
      width: 327px;
      position: relative;
    }
    .article_shadow {
      width: 327px;
      height: 160px;
      border-radius: 4px;
    }
    .title {
      font-size: 14px;
      color: #000;
      margin-top: 8px;
      line-height: 14px;
      margin-left: 4px;
    }
    .category {
      font-size: 12px;
      line-height: 12px;
      color: #999;
      margin: 8px 0 16px 4px;
      @apply truncate;
    }
    .recommend {
      position: relative;
      .article_shadow {
        width: 109px;
        height: 134px;
        border-radius: 4px;
        .img-show {
          width: 40px;
        }
      }
    }
    .gold {
      width: 43px;
      height: 20px;
      // transform: scaleX(-1);
      background-image: linear-gradient(135deg, #eed78e 0%, #cbae6c 100%);
      border-radius: 0 3px 0 8px;
      position: absolute;
      top: 0;
      right: 0;
      .gold-icon {
        position: absolute;
        top: 3px;
        left: 6px;
      }
      .gold-num {
        font-size: 12px;
        color: #ffffff;
        line-height: 12px;
        font-weight: 400;
        position: absolute;
        top: 4px;
        right: 6px;
      }
    }
    .free {
      position: absolute;
      top: 0;
      right: 0;
      width: 43px;
      height: 20px;
      text-align: center;
      font-size: 12px;
      color: #ffffff;
      background-image: linear-gradient(135deg, #ffa45d 0%, #ff613f 100%);
      border-radius: 0 3px 0 8px;
    }
  }
}
</style>
